<template>
  <div class="profile-container">
    <div class="top-title-group">个人信息</div>
    <div class="middle-form-group">
      <el-form
        status-icon
        ref="profileForm"
        :model="profileForm"
        :rules="rules"
        label-width="150px"
        label-position="left"
      >
        <el-form-item label="上传头像">
          <div class="upload-item-group">
            <el-upload
              action="#"
              :show-file-list="false"
              list-type="picture-card"
              :http-request="handleUpLoadRequest"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
          <div class="upload-msg-style">建议上传图片尺寸为60px*60px，若不设置则使用系统默认头像</div>
        </el-form-item>
        <el-form-item required label="邮箱地址" prop="email">
          <el-input style="width:400px" v-model="profileForm.email" placeholder="请输入邮箱地址"></el-input>
        </el-form-item>
        <el-form-item required label="客服名称" prop="nickName">
          <el-input style="width:400px" v-model="profileForm.nickName" placeholder="请输入客服名称"></el-input>
        </el-form-item>
        <el-form-item required label="真实姓名" prop="realName">
          <el-input style="width:400px" v-model="profileForm.realName" placeholder="请输入真实姓名"></el-input>
        </el-form-item>
        <el-form-item label="客服工号">
          <el-input
            style="width:400px"
            disabled
            v-model="profileForm.customerServiceId"
            placeholder="请输入客服工号"
          ></el-input>
        </el-form-item>
        <el-form-item label="客服手机号码" prop="customerServicePhone">
          <el-input
            style="width:400px"
            v-model="profileForm.customerServicePhone"
            placeholder="请输入客服手机号码"
          ></el-input>
        </el-form-item>
        <div class="password-title-style">密码设置</div>
        <el-form-item label="原密码" prop="oldPassword">
          <el-input
            style="width:400px"
            show-password
            v-model="profileForm.oldPassword"
            placeholder="请输入原密码"
          ></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input
            style="width:400px"
            show-password
            v-model="profileForm.newPassword"
            placeholder="请输入新密码"
          ></el-input>
        </el-form-item>
        <el-form-item label="确认新密码" show-password prop="newConfirmPassword">
          <el-input
            style="width:400px"
            v-model="profileForm.newConfirmPassword"
            placeholder="请再次输入新密码"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            :loading="isLoading"
            @click="handleSaveProfile('profileForm')"
          >保 存</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import api from "@/api/api";
export default {
  name: "SettingProfile",
  components: {},
  props: {},
  data() {
    var validateOldPassword = (rule, value, callback) => {
      if (value) {
        api
          .loginAPI({
            email: this.profileForm.email,
            password: value
          })
          .then(res => {
            let { error, data } = res.data;
            if (error) {
              callback(data);
            } else {
              callback();
            }
          });
      } else {
        callback();
      }
    };
    var validateNewPassword = (rule, value, callback) => {
      if (value === "" && this.profileForm.oldPassword) {
        callback(new Error("请输入新密码"));
      } else if (
        this.profileForm.oldPassword &&
        value === this.profileForm.oldPassword
      ) {
        callback(new Error("新密码不能与原密码相同"));
      } else {
        callback();
      }
    };
    var validateNewConfirmPassword = (rule, value, callback) => {
      if (value === "" && this.profileForm.oldPassword) {
        callback(new Error("请再次输入新密码"));
      } else if (
        this.profileForm.newPassword &&
        this.profileForm.newConfirmPassword &&
        this.profileForm.newPassword !== this.profileForm.newConfirmPassword
      ) {
        callback(new Error("两次输入密码不一致"));
      }
      callback();
    };
    return {
      profileForm: {},
      isLoading: false,
      rules: {
        email: [
          {
            type: "email",
            required: true,
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"]
          }
        ],
        nickName: [
          { required: true, message: "请输入客服名称", trigger: "change" }
        ],
        realName: [
          { required: true, message: "请输入真实姓名", trigger: "change" }
        ],
        customerServicePhone: [
          { max: 11, message: "电话号码长度不能超过11位", trigger: "blur" }
        ],
        oldPassword: [
          { min: 6, message: "密码长度不能少于6位", trigger: "blur" },
          { validator: validateOldPassword, trigger: "blur" }
        ],
        newPassword: [
          { min: 6, message: "密码长度不能少于6位", trigger: "blur" },
          { validator: validateNewPassword, trigger: "blur" }
        ],
        newConfirmPassword: [
          { min: 6, message: "密码长度不能少于6位", trigger: "blur" },
          { validator: validateNewConfirmPassword, trigger: "blur" }
        ]
      }
    };
  },
  watch: {},
  computed: {
    customerServiceId() {
      return this.$store.state.profile.customerServiceId;
    },
    imageUrl() {
      return this.$store.state.imageUrl;
    }
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.avatarUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isLt2M;
    },
    handleUpLoadRequest(file) {
      const formData = new FormData();
      formData.append("file", file.file);
      api.uploadFileAPI(formData).then(res => {
        let { error, data } = res.data;
        if (error) {
          this.$message.error(data);
        } else {
          this.imageUrl = data;
          this.$store.commit("setImageUrl", data);
          this.$message({
            message: "头像上传成功",
            type: "success"
          });
        }
      });
    },
    handleUploadSuccess(response, file, fileList) {
      console.log(file);
      console.log(fileList);
    },
    handleSaveProfile(formName) {
      this.isLoading = true;
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.profileForm.newPassword) {
            this.profileForm.password = this.profileForm.newPassword;
          }
          delete this.profileForm.oldPassword;
          delete this.profileForm.newPassword;
          delete this.profileForm.newConfirmPassword;
          api.updateCustomerServiceAPI(this.profileForm).then(res => {
            this.isLoading = false;
            let { error, data } = res.data;
            if (error) {
              this.$message.error(data);
            } else {
              this.$store.commit("setProfile", data);
              this.$message({
                message: "客服信息修改成功",
                type: "success"
              });
            }
          });
        } else {
          this.$message({
            message: "表单填写错误",
            type: "warning"
          });
        }
      });
    }
  },
  created() {
    api.getCustomerServiceAPI(this.customerServiceId).then(res => {
      let { error, data } = res.data;
      if (error) {
        this.$message.error(error);
      } else {
        this.profileForm = data;
      }
    });
  },
  mounted() {}
};
</script>

<style scoped>
.profile-container {
  background-color: #fff;
  border-radius: 5px;
  padding: 20px;
}
.middle-form-group {
  padding-left: 60px;
}
.upload-item-group {
  display: flex;
  align-items: center;
}
.upload-msg-style {
  color: #cccccc;
}
.top-title-group {
  padding-bottom: 20px;
  border-bottom: 1px solid #f2f2f2;
  font-size: 20px;
  margin-bottom: 20px;
}
.password-title-style {
  padding-top: 20px;
  border-top: 1px solid #f2f2f2;
  margin-bottom: 20px;
}
.avatar {
  width: 150px;
  height: 150px;
  display: block;
  border-radius: 5px;
}
</style>
<style>
.el-form--label-left .el-form-item__label {
  color: #c0c4cc;
}
</style>
